<template>
  <div class="list-wrap">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div v-if="list.length">
        <van-list
          v-model="pagination.loading"
          :finished="pagination.finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <div
            v-for="item in list"
           
            class="item"
            @click="$router.push(`/${type}Detail/${item.id}`)"
          >
            <div class="top">
              <span class="show-info">
               
                <span>{{ item.name }}{{ item.number }}</span>
              </span>
              <span class="show-status">
                <!-- <span v-if="type === 'order'" class="total"
                  >{{ item.total }}积分</span
                > -->
                <span>{{ item.statusName }}</span>
              </span>
            </div>
        <div class="bottom">
            <span>广东省深圳市南山区</span>
        </div>
            <div class="bottom">
              <span>{{ item.lastMsg }}</span>
              <slot name="operate" :row="item"></slot>
            </div>
          </div>
        </van-list>
      </div>
      <Empty v-else :eStyle="{ paddingTop: '1.333333rem' }" />
    </van-pull-refresh>
  </div>
</template>

<script>
import Empty from "@/components/Empty";
export default {
  props: ["type"],
  components: {
    Empty,
  },
  data() {
    return {
      refreshing: false,
    };
  },
  computed: {
    list() {
      return this.List();
    },
    pagination() {
      return this.Pagination();
    },
  },
  methods: {
    async onLoad() {
      this.pagination.pageNo += 1;
      await this.GetList();

      // 加载状态结束
      this.pagination.loading = false;

      // 数据全部加载完成
      let { total } = this.pagination;
      if (this.list.length >= total) {
        this.pagination.finished = true;
      }
    },
    async onRefresh() {
      this.pagination.pageNo = 1;
      this.pagination.finished = false;
      // this.pagination.loading = true;
      await this.GetList();
      this.refreshing = false;
    },
  },

  inject: ["List", "Pagination", "GetList"],
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-pull-refresh__track {
    min-height: 80vh;
  }
}
.item {
  width: 100%;
  padding:10px;
  box-sizing: border-box;
  border: 0.013333rem #e3ebf3 solid;    
  margin-bottom: 15px;
  border-radius: 3px;
  > div {
    display: flex;
    justify-content: space-between;
    // align-items: center;
  }
  .top {
    position: relative;
    padding-bottom: 15px;
    font-size: 0.32rem;
    margin-bottom: 5px;
    span:nth-child(2) {
      color: #03a9f4;
      flex-shrink: 0;
      .total {
        color: rgba(0, 0, 0, 0.6);
        font-size: 0.293333rem;
        margin-right: 0.266667rem;
      }
    }
    span:nth-child(3) {
      flex-shrink: 0;
    }
  }
  .top::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    height: 1px;
    width: 100%;
    opacity: 0.5;
    background: #e3ebf3;
  }
  .bottom {
    margin-top: 0.133333rem;
    > span {
      color: #8C8C8C;
      font-size: 13px;
    }
  }
}
.top > span {
  display: block;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}
.list-wrap {
  padding: 0 10px;
}
</style>
